<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>QQ音乐</title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		a{
			text-decoration: none;
			color: black;
		}
		input:focus{
			outline: none;
			}
		
		
		.BBbox .bigbox{
			width: 1270px;
			height:80px;
			border: 1px solid gray;
			margin: auto;
		}
		.bigbox .leftbox{
			width: 724px;
			height: 100%;
			float: left;
			border: 1px solid red;
		}
		.bigbox .rightbox{
			width: 540px;
			height: 100%;
			float: right;
			border: 1px solid aqua;
			
		}
		.leftbox a{
			display: block;
			width: 104px;
			height: 100%;
			border: 1px solid blueviolet;
			float: left;
			
		}
		.leftbox .tb{
			width: 191px;
			position:relative;
		} 
		.leftbox .tb img{
			position: absolute;
			top: 20%;
		}
		.leftbox .zc{
			font-size: 20px;
			text-align: center;
			line-height: 80px;
		}
		 .bigbox .rightbox .headbox{
			width: 252px;
			height: 100%;
			border: 1px solid blue;
			float: left;
			
		} 
		.bigbox .rightbox .ybbox{
			width: 281px;
			height: 100%;
			border: 1px solid blue;
			float: right;
			
		} 
		.rightbox a{
			display: block;
			width: 91px;
			height: 100%;
			border: 1px solid blueviolet;
			float: left;
			
		}
		.rightbox .zc{
			font-size: 20px;
			text-align: center;
			line-height: 80px;
		}
		.rightbox .sear-input{
			font-size: 14px;
			text-align: center;
			line-height: 36px;
			width: 187px;
		}
		.rightbox .sear-input img{
			position: absolute;
			line-height: 20%;
		}
		 .BBbox .nav{
			width: 897px;
			height: 50px;
			border: 1px solid gray;
			margin: auto;
		}
		.nav a{
			display: block;
			width: 97px;
			height: 100%;
			border: 1px solid blueviolet;
			float: left;
		}
		.nav .zc{
			font-size: 20px;
			text-align: center;
			line-height: 49px;
		}
		.BBbox{
		background-color:#ffffff;
		}
		.gdbox{
			width: 1270px;
			height: 820px;
			border:1px solid gray;
			margin: auto;
		}
		.gdbox .onebox{
			width: 300px;
			height: 80px;
			margin: auto;
			font-size: 25px;
			text-align: center;
			line-height: 70px;
			letter-spacing: 10px;
		}
		.gdbox .twobox{
			width: 700px;
			height: 40px;
			margin: auto;
			border: 1px solid gray;
		}
		 .twobox a{
			display: block;
			width: 114px;
			height: 100%;
			border: 1px solid blueviolet;
			float: left;
		}
		.twobox .zc{
			font-size: 16px;
			text-align: center;
			line-height: 39px;
		}
		.gdbox .threebox{
			width:1121px;
			height: 160px;
			margin: auto;
			 border: 1px solid gray;
			padding: 40px;
		}
		.threebox img{
			margin-right: 20px;
		} 
		 
		.zc:hover{
			color: aqua;
		}
	</style>
	<body>
		<div class="BBbox">
			<div class="bigbox">
				<div class="leftbox">
					<a href="#" class="tb">
						<img src="img/logo.png"/>
					</a>
					<a href="#" class="zc">音乐馆</a>
					<a href="#" class="zc">我的音乐</a>
					<a href="#" class="zc">客户端</a>
					<a href="#" class="zc">开放平台</a>
					<a href="#" class="zc">VIP</a>
				</div>
				 
				<div class="rightbox">
					<div class="headbox">
					<input type="text" class="sear-input" placeholder="搜索音乐、MV、歌单、用户" />
					<button type="submit" ><img src="img/搜索4.jpg" /></button>
					</div>
					<div class="ybbox">
						<a href="#" class="zc">登录</a>
						<a href="#" class="zc">开通VIP</a>
						<a href="#" class="zc">充值</a>
						
					</div>
				</div>
				
			</div>
			<div class="nav">
				<a href="#" class="zc">首页</a>
				<a href="#" class="zc">歌手</a>
				<a href="#" class="zc">推荐</a>
				<a href="#" class="zc">推行榜</a>
				<a href="#" class="zc">分类歌单</a>
				<a href="#" class="zc">电台</a>
				<a href="#" class="zc">MV</a>
				<a href="#"class="zc">数字专辑</a>
				<a href="#" class="zc">票务</a>
			</div>
		</div>
		<div class="gdbox">
			<div class="onebox">歌单推荐</div>
			<div class="twobox">
				<a href="#" class="zc">为你推荐</a>
				<a href="#" class="zc">网络歌曲</a>
				<a href="#" class="zc">经典</a>
				<a href="#" class="zc">佛教音乐</a>
				<a href="#" class="zc">官方歌曲</a>
				<a href="#" class="zc">情歌</a>
			</div>
			<div class="threebox">
					<img src="img/1.1.jpg" />
					<img src="img/2.2.jpg" />
					<img src="img/3.3.jpg"/>
					<img src="img/4.4.jpg"/>
					<img src="img/5.5.jpg"/>
			</div>
			<div class="fourbox"></div>
			<div class="fivebox"></div>
			
		</div>
		
	</body>
</html>
